// body,html{
//     width: 100%;
//     height: 100%;
// }
    .content{

        .total-run-km{
            width: 96%;
            height: 90px;
            margin-left: 2%;
            .text{
                margin-top: 10px;
                line-height: 24px;
            }
            .total-num{
                font-size: 40px;
                color: #4294FF ;
            }
        }
        /* .init-map{
            background-color: #f60;
        } */
    }
    // .go按钮
    .go-btn{
        position: fixed;    
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width:150px ;
        height: 150px;
        line-height: 150px;
        text-align: center;
        font-size: 80px;
        color: #1592CC ;
        border-radius: 50%;
        background-color: rgba(66, 148, 255, 0.5);
    }
    /* 三个蒙层 基类
    
    总的原则是先显示模式，再写位置 ，再写尺寸、
       字体大小、文本，边框、背景
       显示模式：指的是display属性
    */
    .base-mask{
       display: none;
       position: fixed;
       width: 100%;
       height: 100%;
    }
    // 倒计时蒙层
    .count-down-mask {
        position: relative;
       background-color: #2096D0;
       .count-down-num{
           position: absolute;
           left: 50%;
           top: 50%;
           transform: translate(-50%,-50%);
           width: 100px;
           height: 100px;
           text-align: center;
           line-height: 100px;
           font-size: 80px;
           color: #fff;
       }
    }
    // 数据模式蒙层
    .data-mode-mask{
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        background-color: rgb(21, 146, 204);
        .smallTitle{
            color: #AAD9F7 ;
            font-size: 16px;
           }
           .bigTitle{
               color: #fff ;
               font-size: 24px;
           }
           .runkm-box{
               color: #fff;
               height: 200px;
               text-align: center;
               line-height: 200px;
            //  border: 1px solid blueviolet;
               .now-km{
                   font-size: 100px;
               }
              
               
           }
           .data-info{
               justify-content: space-around;
               color: #fff;
               text-align: center;
               height: 50px;
               line-height: 50px;
           }
           .btns{
            //    border: 1px solid blueviolet;
               justify-content: space-around;
           }
          /* 三个按钮 */
          .continue-btn,
          .pause-btn,
          .stop-btn{
              margin-top: 120px;
              width: 100px;
              height: 100px;
             padding-top: 20px;
              text-align: center;
              border-radius: 50%;
              color: #fff;
              .iconfont{
                  font-size: 30px;
              }
          }
       
          .continue-btn{
              display: none;
           background-color: rgb(121,240,194);
       
          }
          .pause-btn{
              color: #59B2DB;
              background-color: #fff
          }
          .stop-btn{
           display: none;
       
              background-color: rgb(255,96,96);
          }
       
    }
    .location{
        width: 100%;
        justify-content: space-between;
        align-items: center;
        .txt{
            color: #ACDFFF ;
            
            font-size: 14px;
        }
        .zp-location{
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 32px;
            color: #fff;
        }
    }
    // 地图模式蒙层
    .map-mode-mask{   
        background-color: rgb(121,240,194);
        
        .modality-map{
            width: 100%;
        height: 100%;
        }
        .zp-left,
        .finish    
        {
            display: none;
            position: fixed;
            top: 20px;
            left: 20px;
        }
        .zp-left{
            width: 20px;
            height: 20px;
            font-size: 16px;
            font-weight:bold ;
        }
        .finish{
            padding: 5px;
            border: 1px solid #ccc;
        }
        
        /* 底部区域  */
        .card{
            position: fixed;
            width: 96%;
            left: 50%;
            bottom: 10px;
            transform: translateX(-50%);
            height: 110px;
            border: 1px solid red;
            background-color: #fff;
            .top{
                position: relative;
                padding:5px 20px;
                border-bottom: 1px dashed #ccc;
            
                .outrun{
                    font-size: 12px;
                    color: #5AB1FF;
                }
                .run-km{
                    font-size: 30px;
                }
                .date{
                    position: absolute;
                    right: 10px;
                    bottom: 20px;
                    color: #A0A5A7;
    
                }
            }
            .btm{
                justify-content: space-between;
                margin-top: 6px;
                font-size: 12px;
                padding-left:20px ;
                padding-right:20px ;
                .text{
                    color: #A0A5A7;
                }
            }
        }
    }